<template>
  <div>
    <el-container>
      <el-header>
        <el-row :gutter="20">
          <el-col :span="2">
            <div style="margin-top: 15px;">
              <el-select v-model="queryParams.type" placeholder="请选择" style="width: 100px;" >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>

            </div>
          </el-col>
          <el-col :span="4" style="margin-top: 15px;margin-left: -35px">
            <el-input placeholder="请输入内容" v-model="queryParams.value" class="input-with-select" >
              <el-button slot="append" icon="el-icon-search" type="primary" @click="selPollingCard"></el-button>
            </el-input>
          </el-col>
          <el-col :span="1.5" style="margin-top: 18px;margin-left: -10px">
              <el-button
                type="info"
                plain
                size="small"
                icon="el-icon-upload2"
                @click="handleImport"
              >导入
              </el-button>
            </el-col>
        </el-row>

      </el-header>
      <el-main>
            <el-table v-loading="loading"
              :data="List"
              >

              <el-table-column
                prop="iccid"
                label="卡号"
                >
              </el-table-column>
              <el-table-column
                prop="cd_username"
                label="通道名称"
                >
              </el-table-column>
              <el-table-column
                prop="cd_id"
                label="通道id"
                >
              </el-table-column>
              <el-table-column
                prop="day_auto"

                label="今日是否自动同步">
                <template slot-scope="scope">
                  <div v-if="scope.row.day_auto===0"><div class=el-icon-error style="color: #F56C6C"></div></div>
                  <div v-if="scope.row.day_auto===1"><div class=el-icon-success  style="color: #67C23A"></div></div>
                </template>
              </el-table-column>
              <el-table-column
                prop="day_type"

                label="同步是否成功">
                <template slot-scope="scope">
                  <div v-if="scope.row.day_type===0"><div class=el-icon-error style="color: #F56C6C"></div></div>
                  <div v-if="scope.row.day_type===1"><div class=el-icon-success  style="color: #67C23A"></div></div>
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                align="center"
                width="180"
                fixed="right"
                >
                <template slot-scope="scope">
                <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click="handleDelete(scope.row)"
                  >删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="total>0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :page-sizes="pageSizes"
              :limit.sync="queryParams.pageSize"
              @pagination="getList"
            />
      </el-main>
    </el-container>


        <!-- 导入对话框 -->
          <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
            <el-upload
              ref="upload"
              :limit="1"
              accept=".xlsx, .xls"
              :headers="upload.headers"
              :action="upload.url + '?updateSupport=' + upload.updateSupport"
              :disabled="upload.isUploading"
              :on-progress="handleFileUploadProgress"
              :on-success="handleFileSuccess"
              :auto-upload="false"
              drag
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或
                <em>点击上传</em>
              </div>
              <div class="el-upload__tip" slot="tip">
                <el-link type="info" style="font-size:12px" @click="importTemplate">下载模板</el-link>
              </div>
              <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“xls”或“xlsx”格式文件！</div>
            </el-upload>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="submitFileForm">确 定</el-button>
              <el-button @click="upload.open = false">取 消</el-button>
            </div>
          </el-dialog>
  </div>
</template>

<script>
import {
  autoPollingList,
  autoPollingDel,
  importTemplate
} from "@/api/yunze/flowcard/autoPolling";
import tools from "@/utils/yunze/tools";
import { log } from "util";
import { getToken } from "@/utils/auth";

export default {
  name: "autopolling",
  data() {
    return {
      List: [],
      loading: false,
      tools: tools,
      pageSizes: [10, 30, 50, 100, 200, 300, 500],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        value: "",
        type: "1"
      },
      value: "",
      type: "1",
      options: [
        {
          value: "1",
          label: "ICCID"
        },
        {
          value: "2",
          label: "通道ID"
        }
      ],
      // 导入参数
      upload: {
        // 是否显示弹出层（导入）
        open: false,
        // 弹出层标题（导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/yunze/autoPolling/importData"
      },
      submitFileFormBtn: true //导入 btn
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
      this.upload.open = false;
      this.getList();
    },
    /** 下载模板操作 */
    importTemplate() {
      importTemplate().then(response => {
        this.download(response.msg);
      });
    },

    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = "导入";
      this.upload.open = true;
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$confirm(`确认删除卡号为 ${row.iccid} 的数据吗？`, "提示", {
        type: "warning"
      })
        .then(() => {
          let Pwd_Str = tools.encrypt(row.iccid.toString());
          autoPollingDel(Pwd_Str).then(res => {
            let jsonobj = JSON.parse(tools.Decrypt(res));
            console.log(jsonobj);
            if (jsonobj.code == 200) {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.getList();
            } else {
              this.$message({
                type: "success",
                message: "删除失败:" + jsonobj.msg
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    selPollingCard() {
      this.getList();
    },
    getList() {
      this.loading = true;
      let Pwd_Str = tools.encrypt(JSON.stringify(this.queryParams));
      console.log(this.queryParams);
      autoPollingList(Pwd_Str).then(res => {
        let jsonobj = JSON.parse(tools.Decrypt(res));
        console.log(jsonobj);
        this.total = jsonobj.Data.total;
        this.List = jsonobj.Data.data;
        this.loading = false;
      });
    }
  }
};

</script>


<style lang="scss" scoped>
</style>
